---
title: Library Documentation Tools
order: -2
subGroup: advanced
---

# Library Documentation Tools

Vite-pages provides some tools to reduce the maintenance costs for library authors and make their documents easier to read.

> These tools are mostly for library authors.

## Demos

Demos (or stories) are the fixtures that you use when you are developing your library locally.
Vite-pages allows you to render demos into your app (which can be the document of your library). Using this feature, vite-pages app can not only serve as your **local develop environment** (so that you can debug your demos and your libary code locally), but also the **document for your library** (so that the users of your library can see your demos and lean how to use it).

The following markdown

```tsx
<Demo src="./demos/demo1.tsx" />
```

which will result in:

<Demo src="./demos/demo1.tsx" />

### Using Demo API in JS files

In jsx page, You can import and render demos like this:

```tsx
import demoData from '../demos/demo1.tsx?demo'
import { Demo } from 'vite-pages-theme-doc'

export default function Page() {
  return <Demo {...demoData} />
}
```

## Extract Type info from Typescript code

Vite-pages can help you to extract Typescript type info and render it. With this feature, you **no longer need to manually maintain API information in your documents**! You can reuse your interfaces (and comments in them) from your source code! This is very convenient for API documentation.

### Render Interface

The following markdown

```tsx
<TsInfo src="./types.ts" name="ButtonProps" />
```

> The `name` should be the export name of the Typescript interface.

will result in:

<TsInfo src="./types.ts" name="ButtonProps" />

### Render Type Alias

Besides interfaces, TsInfo API also supports type aliases.

SomeObjectLiteralType (Object Literal):
<TsInfo src="./types.ts" name="SomeObjectLiteralType" />

SomeComplexType (Complex Type):
<TsInfo src="./types.ts" name="SomeComplexType" />

### Using TsInfo API in JS files

In a JSX page, You can import and render tsInfo like this:

```tsx
import tsInfoData from './types.ts?tsInfo=ButtonProps'
import { TsInfo } from 'vite-pages-theme-doc'

export default function Page() {
  return <TsInfo {...tsInfoData} />
}
```

## Render text from files

You can also render text from any file. So that these files can be both "code" and "documentation".

The following markdown

```tsx
<FileText src="./types.ts" syntax="ts" />
```

will result in:

<FileText src="./types.ts" syntax="ts" />

In a JSX page, You can render file text like this:

```tsx
// https://vitejs.dev/guide/assets.html#importing-asset-as-string
import text from './types.ts?raw'
import { FileText } from 'vite-pages-theme-doc'

export default function Page() {
  return <FileText text={text} syntax="ts" />
}
```

## Examples

You can check out [template-lib](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/create-project/template-lib/src/Button/README.md) as an example. (You can [view it online](https://stackblitz.com/fork/github/vitejs/vite-plugin-react-pages/tree/main/packages/create-project/template-lib?file=src%2FButton%2FREADME.md&terminal=dev) or [init this project locally](https://vitejs.github.io/vite-plugin-react-pages/))
